<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>mall</title>
    <!-- 引入样式文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.4/lib/index.css">

    

    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vant@2.4/lib/vant.min.js"></script>

    <link rel="stylesheet" href="index.css">

</head>
<body>
    <div id="app">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item>1</van-swipe-item>
            <van-swipe-item>2</van-swipe-item>
            <van-swipe-item>3</van-swipe-item>
            <van-swipe-item>4</van-swipe-item>
        </van-swipe>
        <div class="main">
            <div class="tp">
                <h3>消毒液</h3>
                <h5 class="price">￥100.80</h5>
            </div>
            <div class="tp2">
                <p>运费：免运费</p>
                <p>剩余：<span>190</span></p>
            </div>
            <van-tabs v-model="active">
                <van-tab title="商品详情">
                    <ul class="itemprop">
                        <li><span>品牌：</span>Kingston/金士顿</li>
                        <li><span>金士顿U盘型号：</span>SDC10/32GB</li>
                        <li><span data-spm-anchor-id="a2147.7709145.itemprop.i1.16527dd6JaZWlf">存储类型：</span>TF(microSD)卡</li>
                        <li><span>内存容量：</span>32GB</li>
                        <li><span>成色：</span>全新</li>
                        <li><span>售后服务：</span>全国联保</li>
                        <li><span>颜色分类：</span>SDCS2/32G</li>
                        <li data-spm-anchor-id="a2147.7709145.itemprop.i0.16527dd6JaZWlf"><span>套餐类型：</span>套餐四 套餐三 官方标配 套餐二 套餐一 套餐五</li>
                        <li><span>生产企业：</span>金士顿科技公司</li>
                        <li><span>读写速度：</span>C10</li>
                        <li><span>是否支持防伪查询：</span>支持</li>
                        <li><span>适用对象：</span>相机 其他 PSP/掌机 手机</li>
                        <li><span>最高读取速度：</span>100MB/s</li>
                        <li><span>最高写入速度：</span>10MB/s</li>
                        <li><span>闪存卡速度等级：</span>UHS-I</li>
                    </ul>
        
                    <van-divider>商品图册</van-divider>
                    <van-grid :border="false" :column-num="3">
                        <van-grid-item>
                          <van-image src="https://img.yzcdn.cn/vant/apple-1.jpg" />
                        </van-grid-item>
                        <van-grid-item>
                          <van-image src="https://img.yzcdn.cn/vant/apple-2.jpg" />
                        </van-grid-item>
                        <van-grid-item>
                          <van-image src="https://img.yzcdn.cn/vant/apple-3.jpg" />
                        </van-grid-item>
                    </van-grid>
                </van-tab>
                <van-tab title="使用教程">
                    <video  controls>
                        <source src="https://cloud.video.taobao.com/play/u/704392951/p/2/e/6/t/1/244034882603.mp4?appKey=38829" type="video/mp4">
                    </video>
                </van-tab>
            </van-tabs>

            <van-button class="user" type="info"  round icon="contact" @click="touser()"></van-button>
            
            
        </div>

       

        <van-submit-bar
            :price="3050"
            button-text="提交订单"
            @submit="nowbuy"
        >
            <van-stepper v-model="skuNum"/>
            <!-- <span slot="tip">
            你的收货地址不支持同城送, <span>修改地址</span>
            </span> -->
        </van-submit-bar>


    </div>

    
    <script>
        // 在 #app 标签下渲染一个按钮组件
        new Vue({
          el: '#app',
          data:{
            skuNum:1,
            active:0,
            active2:0,
          },
          methods: {
            nowbuy() {
                // 选择地址
                window.location.href = './address.html'
            },
            touser(){
                window.location.href = './personal/index.html'
            }
          }
        });
    </script>
</body>
</html>